<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>使用props传递数据__单向数据流</title>
</head>
<body>

<div id="app">
    <my-component :init-count="1"></my-component>
</div>

<hr>

<div id="app1">
    <my-component :width="100"></my-component>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     *V.2x只允许父组件传递数据给子组件，但反过来不允许。
     ***/

    /**
     *  业务中经常遇到两种需要更改props的情况，一种是父组件传递初始值进来，子组件将它作为初始值保存起来，它可以在自己的作用域下随意修改和使用。
     *  这种情况可以在组件data内再声明一个数据，引用父组件的props即可。
     **/

    Vue.component('my-component',{
        props:['initCount'],
        template:"<div>{{ count }}</div>",
        data:function () {
            return {
                count:this.initCount,  //组件中声明了数据count，它在组件初始化时会获取来自父组件的initCount，之后就与之无关，只用维护count，这样可以避免直接操作initCount。
            }
        }
    });

    var app = new Vue({
        el:"#app",
    });


    /**
     * 另一种情况就是prop作为需要被转变的原始值传入，这种情况用计算属性就可以。
     * **/

       Vue.component('my-component',{
        props:['width'],
        template:"<div :style='style'>组件内容</div>",
        computed:{
            style:function () {
                return {
                    width:this.width + 'px',
                }
            }
        }
    });

    var app1 = new Vue({
        el:"#app1",
    });

    /**
     * 因为用CSS传递宽度需要带单位(px)，但是每次都写就太麻烦了，而且数值计算一般都不带单位的，所以统一在组件内使用计算属性就可以。
     * **/


      /**
     *
       * 特别注意：在JS中对象和数组是引用类型，指向同一个内存空间，所以props是对象和数组时，在子组件内修改是会影响到父组件的！
       *
     * **/

</script>
</body>
</html>
